<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			//window.onload
			$(function(){
//				dli 抓取id的快速写法 $("#")
//				dlc   $(".")
//				dl    $("")
				//$("#box div p").css('color','red');		//只能控制一种样式的写法
//				$("#box>p").css({'color':'red','font-size':'25px'});//能控制多种样式的写法
//				$(".one+p").css({'color':'blue','font-size':'30px'});//选择的是class是one之后紧邻的p标签
//				$(".two~p").css({'color':'green','font-size':'40px'});//选择的是class是two之后的所有同级p标签

				/**
				 * 内容
				 */
				//选择的是#box中所有p标签中的第一个p标签
//				$("#box p:first").css({'color':'green','font-size':'40px'});
				//选择的是#box中所有p标签中的最后一个p标签
//				$("#box p:last").css({'color':'green','font-size':'40px'});
				//选择#box下所有的p标签，但是排除.one的标签
//				$("#box p:not(.one)").css({'color':'green','font-size':'40px'});
				//选择的是box中所有序号是偶数的p标签
//				$("#box p:even").css({'color':'green','font-size':'40px'});
				//奇数
//				$("#box p:odd").css({'color':'green','font-size':'40px'});
				//选择的是#box里下标是6的p标签
//				$("#box p:eq(6)").css({'color':'green','font-size':'40px'});				
				//选择#box中所有序号大于3的p标签
//				$("#box p:gt(3)").css({'color':'green','font-size':'40px'});				
				//序号小于3的p标签
//				$("#box p:lt(3)").css({'color':'green','font-size':'40px'});		
				//选择的是匹配到字符串的标签
//				$("#box p:contains(3)").css({'color':'green','font-size':'40px'});		
				//选择的是空标签
//				$("#box p:empty").css({'width':'30px','height':'50px','background-color':'blue'})		
				//选择的是包含span标签的p标签
//				$("#box p:has(span)").css({'color':'green','font-size':'40px'});		
				//选择的是#box里的非空p标签
//				$("#box p:parent").css({'color':'green','font-size':'40px'});		

				/**
				 * 可见性
				 */
				//选中#box中不可见的p标签
//				$("#box p:hidden").css({'color':'blue','display':'block'})
				//选中#box可见的p标签
//				$("#box p:visible").css({'color':'blue')
				
				/**
				 * 属性选择器
				 */
				//选择的是#box中所有有class属性的p标签
//				$("#box p[class]").css({'color':'green','font-size':'40px'});
//				$("#box p[lx]").css({'color':'green','font-size':'40px'});//选择自定义属性的元素
//				$("#box p[lx=luoxin]").css({'color':'red','font-size':'40px'});//选择自定义属性及自定义值的元素 优点:可以选择自定义属性
				//选择的是#box里class属性值以on开头的p标签
//				$("#box p[class^=on]").css({'color':'blue'});
				//选择的是#box中class值以e结尾的p标签
//				$("#box p[class$=e]").css({'color':'red'});
				//选择的是#box中class值中含有n的p标签
//				$("#box p[class*=n]").css({'color':'red'});


				/**
				 * 子元素
				 */
				//选择的是每个span的父级元素中第一个span子元素。子元素必须是span，否则不能被选中
//				$("div span:first-child").css({'color':'red'});
				//选择的div下是每个span的父级元素的中的第一个span
//				$("div span:first-of-type").css({'color':'red'});
				
				//选择的是每个span元素的父级元素中的第二个子元素，如果第二个子元素是span才会选中，
//				$("div span:nth-child(2)").css({'color':'red'});
				//选择的是每个span元素的父级元素中的所有span标签中的第二个span
//				$("div span:nth-of-type(2)").css({'color':'red'});
				//only-child  only-of-type 同理，针对的是单一孩子的情况
				
			})
		</script>
	</head>
	<body>
		<div id="box">
			<p>这是p标签1</p>
			<p class="twon">这是p标签2</p>
			<p lx="luoxin">这是p标签3 <span>我是span</span></p>
			<p>这是p标签4</p>
			<p style="display: none;">这是p标签5 <span>我是span</span></p>
			<div>
				<p class="one">我们也是p标签</p>
				<p class="one">我们也是p标签</p>
				<p>我们也是p标签</p>
				<p></p>
				<p></p>
			</div>
		</div>
		<br />
		<br />
		<div>
			<!--<p>这是个p标签0</p>-->
			<span>这是个span标签1</span>
			<p>这是个p标签2</p>
			<span>这是个span标签3</span>
			<p>这是个p标签4</p>
			<span>这是个span标签5</span>
			<p>这是个p标签6</p>
			<span>这是个span标签7</span>
			<p>这是个p标签8</p>
			<span>这是个span标签9</span>
		</div>
		<br />
		<br />
		<div>
			<p>这是个p标签0</p>
			<span>这是个span标签1</span>
			<p>这是个p标签2</p>
			<span>这是个span标签3</span>
			<p>这是个p标签4</p>
			<span>这是个span标签5</span>
			<p>这是个p标签6</p>
			<span>这是个span标签7</span>
			<p>这是个p标签8</p>
			<span>这是个span标签9</span>
		</div>
	</body>
</html>